import React, { Component } from "react";
import { Layout, Avatar, Modal } from "antd";
// import "./index.scss"
import { withRouter } from "react-router-dom"
import { LogoutOutlined } from "@ant-design/icons"
import {observer} from "mobx-react";
import usermobx from "*/mobx/user"

const { Header } = Layout;
@withRouter
@observer
class Head extends Component {
    state = {
        pic: require("*/assets/images/pic12.jpg"),
        users: null,
        visible: false
    }
    componentDidMount() {
        var users = sessionStorage.users;
        if (users) {

            users = JSON.parse(users)
        }
        this.setState({
            users
        })
    }
    handleLogout = () => {
        this.setState({
            visible:true
        })
    
    }
    hideModal = () => {
        this.setState({
            visible:false
        })
    
    }
    loglouaction=()=>{
        this.setState({
            visible:false
        })
        sessionStorage.users = null;
        sessionStorage.token = null;
        sessionStorage.mobile = null;
        usermobx.getuserinfo(null)
        this.props.history.push("/login")
    }

    render() {
        const {
            users
        } = this.state;
        return (
            <Header className="header" >
                <div className="logo" onClick={()=>usermobx.changeNum(20)}>
                    <p>社区防疫管理系统 </p>
            </div>
                {
                    users && <div className="userinfo">
                        <Avatar src={this.state.pic} />
                        <span>{users.username}</span>
                        <LogoutOutlined
                            onClick={this.handleLogout}
                            className="userinfologout"
                        />
                    </div>
                }
                <Modal
                    title="退出提示"
                    visible={this.state.visible}
                  onOk={this.loglouaction}
                  onCancel={this.hideModal}
                  okText="确认"
                  cancelText="取消"
                >
                    <p>你确定要退出登录吗</p>
                </Modal>
            </Header>
        )
    }
}

export default  Head
